03 - CSS 基础

CSS 简介

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Introduction</title>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
      }

      p {
        color: red;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Hello, CSS!</h1>
    <p>This is an example of CSS introduction.</p>
  </body>
</html>

CSS 引入方式

选择器 1

标签选择器

类选择器

id 选择器

通配符选择器

画盒子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画盒子</title>
  <style>
    .red {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }

    .orange {
      width: 200px;
      height: 200px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div class="red">div1</div>
  <div class="orange">div2</div>
</body>

</html>

字体

CSS 属性 描述 常见值
font-style 字体样式 normal, italic, oblique
font-weight 字体粗细 normal, bold, bolder, lighter
font-size 字体大小 绝对大小（px, pt, mm）, 相对大小（em, rem）
font-family 字体族 字体名称（Arial, Helvetica, Times New Roman 等），多字体备选
font-variant 字体变体 normal, small-caps

字体大小 font-size

字体粗细 font-weight

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 使用关键词 */
      .normal {
        font-weight: normal; /* 普通 */
      }
      .bold {
        font-weight: bold; /* 粗体 */
      }
      .bolder {
        font-weight: bolder; /* 更粗 */
      }
      .lighter {
        font-weight: lighter; /* 稍微细一点 */
      }

      /* 使用数字值 */
      .light {
        font-weight: 200; /* 很轻 */
      }
      .extra-bold {
        font-weight: 800; /* 非常粗 */
      }
    </style>
  </head>
  <body>
    <p class="normal">这是普通的文本。</p>
    <p class="bold">这是粗体文本。</p>
    <p class="bolder">这是更粗的文本。</p>
    <p class="lighter">这是稍微细一点的文本。</p>
    <p class="light">这是很轻的文本。</p>
    <p class="extra-bold">这是非常粗的文本。</p>
  </body>
</html>

字体倾斜样式 font-style

<!DOCTYPE html>
<html>
  <head>
    <style>
      .normal {
        font-style: normal; /* 正常 */
      }
      .italic {
        font-style: italic; /* 斜体 */
      }
      .oblique {
        font-style: oblique; /* 倾斜 */
      }
    </style>
  </head>
  <body>
    <p class="normal">这是正常的文本。</p>
    <p class="italic">这是斜体文本。</p>
    <p class="oblique">这是倾斜的文本。</p>
  </body>
</html>

行高 line-height

<!DOCTYPE html>
<html>
  <head>
    <style>
      .line-number {
        line-height: 1.5; /* 行高为 1.5 倍字体大小 */
      }
      .tight-line {
        line-height: 1; /* 行高为字体大小 */
      }
      .wide-line {
        line-height: 2; /* 行高为 2 倍字体大小 */
      }
    </style>
  </head>
  <body>
    <p class="line-number">这里是一行有行号的文本。</p>
    <p class="tight-line">这里是行间距较小的文本。</p>
    <p class="wide-line">这里是行间距较大的文本。</p>
  </body>
</html>

字体族 font-family

<!DOCTYPE html>
<html>
  <head>
    <style>
      .serif-font {
        font-family: "Times New Roman", Times, serif;
      }
      .sans-serif-font {
        font-family: Arial, Helvetica, sans-serif;
      }
      .monospace-font {
        font-family: "Courier New", Courier, monospace;
      }
    </style>
  </head>
  <body>
    <p class="serif-font">这是衬线字体。</p>
    <p class="sans-serif-font">这是非衬线字体。</p>
    <p class="monospace-font">这是等宽字体。</p>
  </body>
</html>

字体 font

<!DOCTYPE html>
<html>
  <head>
    <style>
      .custom-font {
        font: italic small-caps bold 20px/1.5 "Times New Roman", Times, serif;
      }
    </style>
  </head>
  <body>
    <p class="custom-font">这是一个自定义的字体样式。</p>
  </body>
</html>

文本

CSS 属性 描述 常见值
color 文本颜色 颜色值（如 red, #000000）
text-align 文本对齐方式 left, right, center, justify
text-decoration 文本修饰效果 none, underline, overline, line-through
text-transform 文本转换效果 none, capitalize, uppercase, lowercase
line-height 行高 数字、单位（如 1.5, 2em）
letter-spacing 字间距 数字、单位（如 1px, 0.2em）
word-spacing 词间距 数字、单位（如 1px, 0.2em）
text-indent 首行缩进 数字、单位（如 20px, 1em）
white-space 空白处理方式 normal, nowrap, pre, pre-wrap, pre-line
text-overflow 文本溢出处理方式 clip, ellipsis
text-shadow 文本阴影效果 none, <offset-x> <offset-y> <blur-radius> <color>
text-justify 文本对齐方式（较少使用） auto, inter-word, inter-ideograph, inter-cluster

文本首行缩进 text-indent

<!DOCTYPE html>
<html>
  <head>
    <style>
      .indent-20px {
        text-indent: 20px;
      }
      .indent-50percent {
        text-indent: 50%;
      }
    </style>
  </head>
  <body>
    <p class="indent-20px">这是一个首行缩进为 20 像素的段落。</p>
    <p class="indent-50percent">这是一个首行缩进为父元素宽度的 50% 的段落。</p>
  </body>
</html>

文本对齐 text-align

<!DOCTYPE html>
<html>
  <head>
    <style>
      .left-align {
        text-align: left;
      }
      .right-align {
        text-align: right;
      }
      .center-align {
        text-align: center;
      }
      .justify-align {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="left-align">这是左对齐的文本。</div>
    <div class="right-align">这是右对齐的文本。</div>
    <div class="center-align">这是居中对齐的文本。</div>
    <div class="justify-align">这是两端对齐的文本。</div>
  </body>
</html>

文本修饰线 text-decoration

<!DOCTYPE html>
<html>
  <head>
    <style>
      .underline {
        text-decoration: underline;
      }
      .overline {
        text-decoration: overline;
      }
      .line-through {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <p class="underline">这是一段有下划线的文本。</p>
    <p class="overline">这是一段有上划线的文本。</p>
    <p class="line-through">这是一段有删除线的文本。</p>
  </body>
</html>

文本颜色 color

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red-text {
        color: red;
      }
      .blue-text {
        color: blue;
      }
      .green-text {
        color: #00ff00;
      }
      .rgb-text {
        color: rgb(255, 0, 0);
      }
      .rgba-text {
        color: rgba(0, 0, 255, 0.5);
      }
    </style>
  </head>
  <body>
    <p class="red-text">这段文本是红色的。</p>
    <p class="blue-text">这段文本是蓝色的。</p>
    <p class="green-text">这段文本是绿色的。</p>
    <p class="rgb-text">这段文本是 RGB 红色的。</p>
    <p class="rgba-text">这段文本是带有透明度的蓝色的。</p>
  </body>
</html>

chrome 开发者工具

综合案例 3

案例 - 新闻详情

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新闻详情</title>
    <style>
      body {
        font: 18px/1.5 "Microsoft YaHei", sans-serif;
        color: #333;
      }

      h1 {
        text-align: center;
        font: 600 30px/1.5 "Microsoft YaHei", sans-serif;
      }

      .source {
        color: #999;
        font-size: 14px;
      }

      strong {
        font-size: 18px;
      }

      p {
        text-indent: 2em;
      }

      .pic {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
    <div class="source">来源：央视网 | 2222 年 12 月 12 日 12:12:12</div>
    <p>
      <strong>央视网消息：</strong>
      眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。
    </p>
    <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370 万亩中稻已经收割四成以上。</p>
    <div class="pic">
      <img src="https://picsum.photos/500/300" alt="" />
    </div>
    <p>
      王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有
      20 多个，这些水稻新品将在荆门全面推广，确保来年增产增收。
    </p>
    <p>
      此外，湖北还大力推进高标准农田建设。截至今年 6 月，已建成 3980 万亩高标准农田。目前，湖北全省仍有 1800
      多万亩中稻正在有序收割中，预计 10 月中旬收割完毕。
    </p>
  </body>
</html>

案例 - CSS 简介

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS简介</title>
    <style>
      body {
        background-color: #f0f0f0;
        color: #444;
        font: 14px/30px "微软雅黑";
      }

      h1 {
        color: #333;
      }

      a {
        color: #0069c2;
      }

      p {
        text-indent: 2em;
      }
    </style>
  </head>

  <body>
    <h1>CSS（层叠样式表）</h1>
    <p>
      层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种 <a href="#">样式表</a> 语言，用来描述 HTML 或 XML（包括如
      SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS
      描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
    </p>
    <p>
      <strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。
      样式可以通过定义保存在外部.css
      文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1
      现已废弃，CSS2.1 是推荐标准，CSS3 分成多个小模块且正在标准化中。
    </p>
    <ul>
      <li>CSS 介绍 如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法。</li>
      <li>
        CSS 教程 我们的 CSS 学习区 包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。
      </li>
      <li>CSS 参考 针对资深 Web 开发者的 <a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li>
    </ul>
  </body>
</html>